{% extends "base.html" %}
{% block title %}
    修改会员信息
{% endblock %}
{% block main %}
    <div class="col-10 offset-1">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">修改会员信息</h3>
            </div>
            <form method="post" id="memberUpdateForm" class="form-horizontal">
                {% csrf_token %}
                <input type="hidden" name="Mid" value="{{ member.Mid }}">
                <div class="card-body">
                    <div class="form-group">
                        <label>会员名</label>
                        <input type="text" name="Mname" class="form-control" value="{{ member.Mname }}" placeholder="会员名">
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <select name="Msex" class="form-control">
                            <option value="0" {% if member.Msex == 0 %} selected {% endif %}>男</option>
                            <option value="1" {% if member.Msex == 1 %} selected {% endif %}>女</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>身份证号</label>
                        <input type="text" name="Mcard" class="form-control" value="{{ member.Mcard }}" placeholder="身份证号">
                    </div>
                    <div class="form-group">
                        <label>电话号码</label>
                        <input type="text" name="Mtel" class="form-control" value="{{ member.Mtel }}" placeholder="电话号码">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <input type="text" name="other" class="form-control" value="{{ member.other }}" placeholder="备注">
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-8 offset-2">
                            <button type="submit" class="btn btn-primary btn-block">更新信息</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });

            $.validator.addMethod("isValidDate", function (value, element) {
                return this.optional(element) || /^(\d{4})-(\d{2})-(\d{2})$/.test(value);
            }, "日期格式不正确，应为yyyy-MM-dd");

            $.validator.setDefaults({
                submitHandler: function () {
                    $.ajax({
                        async: true,
                        cache: false,
                        url: "/member_update",
                        data: $("#memberUpdateForm").serialize(),
                        type: "post",
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: res.message
                                });
                                setTimeout(function () {
                                    window.location.href = '/member_list';
                                }, 1500);
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: res.message
                                });
                            }
                        }
                    });
                }
            });

            $('#memberUpdateForm').validate({
                rules: {
                    Mname: {
                        required: true,
                        maxlength: 30
                    },

                    Mcard: {
                        required: true,
                        maxlength: 18
                    },
                    Mtel: {
                        required: true,
                        maxlength: 12
                    },
                    other: {
                        maxlength: 20
                    }
                },
                messages: {
                    Mname: {
                        required: '请输入会员名',
                        maxlength: '会员名不能超过30个字符'
                    },

                    Mcard: {
                        required: '请输入身份证号',
                        maxlength: '身份证号不能超过18个字符'
                    },
                    Mtel: {
                        required: '请输入电话号码',
                        maxlength: '电话号码不能超过12个字符'
                    },
                    other: {
                        maxlength: '备注不能超过20个字符'
                    }
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
    </script>
{% endblock %}
